<template>
    <div>
        <el-alert
            :class="['el_link_father',showIcon ? 'iconTrue' : 'iconFalse']"
            :show-icon="showIcon"
            :title="title "
            :type="typeAlert"
            class="el_link_father"
>
            <el-link
                ref="link"
                :disabled="isDisabled"
                :herf="herf"
                :target="target"
                :type="typeLink"
                :underline="underline"
                class="el_link"
            >{{ linkTest }}
            </el-link>
        </el-alert>
    </div>
</template>
<script>
export default {
    name: 'AlertLink',
    props: {
        title: {
            type: String,
            default: '',
        },
        typeAlert: {
            type: String,
            default: 'success',
        },
        showIcon: {
            type: Boolean,
            default: false,
        },
        typeLink: {
            type: String,
            default: '',
        },
        herf: {
            type: String,
            required: true,
        },
        target: {
            type: String,
            default: '_blank',
        },
        isDisabled: {
            type: Boolean,
            default: false,
        },
        linkTest: {
            type: String,
            required: true,
        },
        underline: {
            type: Boolean,
            default: false,
        },
    },
    mounted() {
        console.log(this.$refs.link.$parent)
    },
}
</script>
<style lang="scss">
.el_link_father {
    position: relative;
}

.el_link_father p {
    display: inline-block;
    color: #0062ff !important;
    font-size: 14px !important;
    position: absolute;
    padding-left: 8px;
}

.iconTrue p {
    top: 9px;
}

.iconFalse p {
    top: 4px;
}
</style>
